<template>
    <div class='cemetery' >
        <el-row class="tac">
            <el-col :span="4" class='cols'>
                <div class='menu' style='border-right:1px solid #ddd;'>
                    <!--el-menu
                    ref="elMenu"
                    :default-openeds="[0]"
                    :default-active="active"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose">

                    <el-submenu :index="index" v-for="(item,index) in leftMenu" :key="index">
                        <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>{{item.title}}</span>
                        </template>
                        <template v-for="child in item.child" >
                            <el-menu-item :index="child.id" v-if="child.child.length==0" :key="child.id" @click.native="loadRight(child.id)"> {{child.title}}</el-menu-item>
                            <el-submenu v-else :index="child.id" v-for="child2 in child.child"  :key="child2.id"  >
                                <template slot="title" @click.native="loadRight(child2.id)">{{child.title}}</template>
                                <el-menu-item :index="child2.id"  @click.native="loadRight(child2.id)">{{child2.title}}</el-menu-item>
                            </el-submenu>
                        </template>
                    
                    </el-submenu>

                
                    </el-menu-->
                    <el-tree
                        :data="leftMenu"
                        :props="defaultProps"
                        node-key="id"
                        ref="elMenu"
                        show-checkbox
                        check-strictly
                        
                        :default-expanded-keys="defaultShowNodes"
                        @node-click="handleNodeClick2"
                        @check-change="handleNodeClick">
                    </el-tree>

                </div>
                <div class='left_btn'>
                     <div class='cemetery_show'>
                         <div class='cemetery_show_color_1'>
                             &nbsp;
                         </div>
                         未出售
                     </div>

                     <div class='cemetery_show'>
                         <div class='cemetery_show_color_2'>
                             &nbsp;
                         </div>
                         购买
                     </div>

                      <div class='cemetery_show'>
                         <div class='cemetery_show_color_3'>
                             &nbsp;
                         </div>
                         部分安葬
                     </div>

                      <div class='cemetery_show'>
                         <div class='cemetery_show_color_4'>
                             &nbsp;
                         </div>
                         全部安葬
                     </div>
                      <div class='cemetery_show'>
                         <div class='cemetery_show_color_5'>
                             &nbsp;
                         </div>
                         作废
                     </div>
                </div>
                
            </el-col>
            <el-col :span="20" class='cols2'>
                <div class='btnss'>
                        <el-dropdown>
                            <el-button type="primary">
                                墓区管理<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-circle-plus-outline" @click.native="openAddArea('/commonEdit','0')">新增区</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-edit-outline"  @click.native="openEditArea('/commonEdit')">修改区</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-delete" @click.native="delArea()">删除区</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>

                        <el-dropdown style='margin-left:10px'>
                            <el-button type="success">
                                墓位管理<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-circle-plus-outline" @click.native="openWin('新增墓位#/commonEdit#公墓信息管理系统/业务管理/墓位管理/修改墓位')">新增墓位</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-edit-outline"  @click.native="openWin2('批量新增墓位#/commonEdit#公墓信息管理系统/业务管理/墓位管理/批量新增墓位#cemetery')">批量新增墓位</el-dropdown-item>
                                <!--el-dropdown-item icon="el-icon-tickets"   @click.native="openWin2('批量修改墓位#/commonEdit#公墓信息管理系统/业务管理/墓位管理/批量修改墓位#cemetery')">批量修改墓位</el-dropdown-item-->
                                <el-dropdown-item icon="el-icon-tickets"   @click.native="openWin3('修改墓位#/commonEdit#公墓信息管理系统/业务管理/墓位管理/批量修改墓位2#cemetery')">修改墓位</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-delete" @click.native="delMw()">删除墓位</el-dropdown-item>
                           
                            </el-dropdown-menu> 
                        </el-dropdown>
                       

                </div>
                <div class='search'>
                </div>
                <div class='contents'  v-loading="loading">
                    <div class='contents_left' ref="contents_left">
                        <div class='contents_left_head'>&nbsp;</div>
                        <div class='contents_left_content'>
                            <div class='contents_left_content_item' v-for="index of maxCol" :key="index">
                                {{index}}
                            </div>
                        </div>
                    </div>
                    <div class='contents_right'>
                        <div class='contents_head' ref="contents_head_item">
                            <div  >
                            <div class='contents_head_item'  v-for="index of maxRow" :key="index"  >
                                {{index}}
                            </div>
                            </div>
                        </div>

                        <div class='contents_gm' ref="contents"  @scroll="sysHandleScroll()">
                            <input type='checkbox' id="all" @click="checkedAll(rightCememtery)" v-if="rightCememtery.length>0"/><label for="all"  v-if="rightCememtery.length>0">全选</label>
                            <div class='car_row' v-for="(item,index) in rightCememtery" :key="index" :style="item.widths">
                                
                                <input type='checkbox' style='float:left;margin-top:65px' @click="checkedMore(item.child)"/>
                                <div class='card_item' v-for="(child,index2) in item.child" :key="index2" style='text-align:center'>
                                    <el-card :body-style="{ padding: '0px' }">
                                    
                                        <div :class='{"gm":true,"noCheckout":child.noCheckout}'  v-if="child.gm_ex19=='墓穴'">
                                            <div class='gm_child'>
                                                <div :class='child.head' v-if="child.gm_ex6">
                                                    <input type='checkbox' @click="checkedOne(child.gm_id)" :checked="fruitIds.indexOf(child.gm_id)>=0" />{{child.gm_ex6}} 
                                                    <span v-if="child.noCheckout" style='color:red'>(未结账)</span>
                                                </div>
                                                <div :class='child.head' v-else>
                                                    {{child.gm_ex3}}-{{child.gm_ex4}}
                                                </div>
                                                <div class='gm_content' v-html="child.names" :class="child.content">
                                                
                                                </div>
                                                <div class="bottom clearfix" style='font-size:13px'>
                                                
                                                </div>
                                                <div class='bottom_text'>
                                                    {{child.gm_ex20}}-{{child.gm_ex21}}
                                                </div>
                                            </div>
                                        
                                        </div>

                                        <div v-if="child.gm_ex19=='空地'" class='kd'>
                                            <div class='kd_child'>
                                            </div>
                                        </div>

                                    </el-card>
                                    
                                </div>
                            </div>
                            <div v-if="rightCememtery.length==0" class='noCemeteryDiv'>
                                暂无数据
                            </div>
                        </div>
                    </div>
                    


                </div>
                
                
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    data(){
        return{
            leftMenu:[],
            rightCememtery:[],
            gm_id:'1',
            active:'',
            areaId:'',
            loading:false,
            appid:"",
            fruitIds:[],
            defaultProps: {
                children: 'child',
                label: 'title'
            },
            defaultShowNodes:[]
        }
    },
    created(){
        this.gm_id=this.$route.query.sId;
        this.appid=this.$route.query.appid;
        let sef=this;
        this.loadLeft();
        window.addEventListener('message', function(messageEvent) {
           sef.loadLeft();
        // vue.menuTitle = data;
           // sef.$refs.commonList.isShowTable();
        },false);
    },
    methods: {
        checkedOne (fruitId) {
            let idIndex = this.fruitIds.indexOf(fruitId)
            if (idIndex >= 0) {
                // 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状态)
                this.fruitIds.splice(idIndex, 1)
            } else {
                // 选中该checkbox
                this.fruitIds.push(fruitId)
                /*if(this.fruitIds.length == this.fruits.length){ 
                    this.isCheckedAll=true; 
                } else {
                    this.isCheckedAll=false; 
                }*/
            }
        },
        checkedMore(item){
            for(let i=0;i<item.length;i++){
                this.checkedOne(item[i].gm_id);
            }
        },
        checkedAll(item){
            for(let i=0;i<item.length;i++){
                this.checkedMore(item[i].child);
            }
        },
        openAddArea(url,type){
               let pId=this.areaId;
               if(!pId||pId==undefined||pId=="undefined"||pId.indexOf("p")!=-1){
                   pId="-1";
               }
               //alert(this.areaId)
            //if(this.areaId){
                let datas={};
                datas.buttonName="新增区";
                datas.url=url;
                datas.exId=this.gm_id;
                datas.sId="";
                datas.pId=pId;
                datas.width="500px";
                datas.height="350px";
                datas.filename2="公墓信息管理系统/业务管理/墓区管理/新增墓区";
                datas.appid="business";
                this.$emit("openWin",JSON.stringify(datas))
                //parent.postMessage(JSON.stringify(datas),'*');
           /* }else{
                this.$alert('请先选择一行数据', '错误提示', {
                    confirmButtonText: '确定',
                    callback: action => {}
                });
                return;
            }*/
            
        },
        openEditArea(url){
            if(this.areaId){
                let datas={};
                datas.buttonName="修改区";
                datas.url=url;
                datas.exId=this.gm_id;
                datas.sId=this.areaId;
                datas.width="500px";
                datas.height="350px";
                datas.filename2="公墓信息管理系统/业务管理/墓区管理/修改墓区";
                datas.appid="business";
                this.$emit("openWin",JSON.stringify(datas))
                //parent.postMessage(JSON.stringify(datas),'*');
            }else{
                this.$alert('请先选择一行数据', '错误提示', {
                    confirmButtonText: '确定',
                    callback: action => {}
                });
                return;
            }
            
        },
        openWin(url){
            let urls=url.split("#");
            let datas={};
            datas.buttonName=urls[0];
            datas.url=urls[1];
            datas.pId=this.gm_id;
            datas.exId=this.areaId;
            datas.width="650px";
            datas.height="450px";
            datas.filename2=urls[2];
            datas.appid=urls.length>3 ? urls[3]:"business";
            this.$emit("openWin",JSON.stringify(datas))
           // parent.postMessage(JSON.stringify(datas),'*');
        },
        openWin2(url){
            let urls=url.split("#");
            let datas={};
            datas.buttonName=urls[0];
            datas.url=urls[1];
            datas.sId=this.areaId;
            datas.exId=this.gm_id;
            datas.width="850px";
            datas.height="550px";
            datas.filename2=urls[2];
            datas.appid=urls.length>3 ? urls[3]:"business";
            this.$emit("openWin",JSON.stringify(datas))
           // parent.postMessage(JSON.stringify(datas),'*');
        },
        openWin3(url){
            let urls=url.split("#");
            let datas={};
            datas.buttonName=urls[0];
            datas.url=urls[1];
            datas.sId=this.fruitIds.join(",");
            datas.width="650px";
            datas.height="450px";
            datas.filename2=urls[2];
            datas.appid=urls.length>3 ? urls[3]:"business";
            this.$emit("openWin",JSON.stringify(datas))
           // parent.postMessage(JSON.stringify(datas),'*');
        },
        initData(){
            this.loadLeft();
        },
        goSearch(){
            this.loadLeft();
            
        },
        loadLeft(){
            console.log("appid========="+this.appid);
            this.$post(this.appid,"/cemetery/getAarea",{gm_id:this.gm_id}).then(data=>{
                this.leftMenu=data;
                let child=null;
                if(this.leftMenu.length>0){
                    if(this.active){
                         this.defaultShowNodes=[];
                         this.defaultShowNodes.push(this.active);
                         this.loadRight(this.active)
                    }else{
                        let isOk=true;
                        child=this.leftMenu[0].child;
                        while(isOk){
                            if(child.length>0){
                                if(child[0].child&&child[0].child.length>0)
                                    child=child[0].child;
                                else
                                    isOk=false;
                            }else{
                                isOk=false;
                            }
                        }
                        
                        this.active=child[0].id;
                        this.loadRight(child[0].id)
                        this.gm_id=child[0].pId;
                        this.areaId=child[0].id;
                        this.defaultShowNodes=[];
                        this.defaultShowNodes.push(child[0].id);
                        console.log("child===================================");
                        console.log(child)
                        this.$refs.elMenu.setCheckedKeys([child[0].id]);
                    }
                    
                }else{
                     this.loading=false;
                    
                }
               
                
            })
        },
        loadRight(id){

           this.loading=true;
           this.areaId=id;
           this.$post(this.appid,"/cemetery/getCemetery",{areaId:id}).then(data=>{
               this.rightCememtery=data.data;
               this.loading=false;
           })
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClick(command){
            let vals=command.split("#");
            if(vals.length==5){

                let datas={};
                datas.buttonName=vals[0];
                datas.url=vals[1];
                datas.sId=vals[3];
                datas.filename2=vals[2];
                datas.appid=vals[4];

                
                this.$emit("openWin",JSON.stringify(datas))


               
               // parent.postMessage(JSON.stringify(datas),'*');
            }else{
                this.$confirm(vals[0], '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    
                    this.$post(vals[3],vals[1],{filename:vals[2]}).then(data=>{
                        if(data[0].status=="+OK"){
                            this.$message(unescape(data[0].msg));
                            this.goSearch()
                        }else{
                            this.$alert(unescape(data[0].msg), '错误提示', {
                                confirmButtonText: '确定',
                                callback: action => {}
                            });
                        }
                    });
                }).catch(() => {
                            
                });
            }
           
        },
        delArea(){
             this.$confirm('此操作将永久删除该墓区, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post("business","/api/view/delCommonEdit",{ids:this.areaId,filename:"公墓信息管理系统/业务管理/墓区管理/修改墓区"}).then(data=>{
                    this.$message(unescape(data[0].msg));
                    this.goSearch()
                });
            }).catch(() => {
                         
            });
        },
        delMw(){
             this.$confirm('此操作将永久删除选中的墓位, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post("business","/api/view/delCommonEdit",{ids:this.fruitIds.join(","),filename:"公墓信息管理系统/业务管理/墓位管理/修改墓位"}).then(data=>{
                    this.$message(unescape(data[0].msg));
                    this.goSearch()
                });
            }).catch(() => {
                         
            });
        },

        handleNodeClick(data, checked, node) {
            if(checked === true) {
                this.areaId=data.id;
                this.gm_id=data.pId;
                this.checkedId = data.id;
                this.active=this.areaId;
                this.$refs.elMenu.setCheckedKeys([data.id]);
                this.loadRight(data.id)
            } else {
                if (this.checkedId == data.id) {
                    this.$refs.elMenu.setCheckedKeys([data.id]);
                }
            }
        },
        handleNodeClick2(data) {
            this.areaId=data.id;
            this.gm_id=data.pId;
            this.checkedId = data.id;
            this.active=this.areaId;
            this.$refs.elMenu.setCheckedKeys([data.id]);
            this.loadRight(data.id)
        },
         sysHandleScroll() {
            this.$refs.contents_left.scrollTop = this.$refs.contents.scrollTop
            this.$refs.contents_head_item.scrollLeft=this.$refs.contents.scrollLeft
            
        },
            
    },
    watch:{
        active(val, oldVal){
            console.log("val===s=s=="+val+"="+oldVal);
        }
    }
}
</script>

<style scoped  src="../../assets/css/cemetery/cemetery.css">
</style>
<style >
.gms{
    margin-left:3px;
    margin-top:3px;
    width:44%;
    border-radius: 60px 60px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:10px;
}
.gm_death{
    background:indigo;
    color:#fff;
}
.gm_death2{
    background:indianred;
    color:#fff;
}
.gm_gm{
    background:#1ea44d;
    color:#fff;

}
.gm_nodeath{
    background:#1ea44d;
    color:#fff;
}
.gm_nogm{
    background:cornflowerblue;
    color:#fff;
}
</style>